<template>
    <div>
        <p class="periods">{{PKinfo.expect}}</p>
        <div>
          <div>
            <span class="beijingPK-item-title spanstyle" v-for="(bgColor,gbindex) in bgColorTitle" :key="gbindex">{{bgColor.title}}</span>
          </div>
          <div>
            <span class="beijingPK-item-num spanstyle" :class="{classone:index==0, classtwo:index==1, classthree:index==2, classfore:index==3,classfive:index==4,classsix:index==5,classseven:index==6,classeight:index==7,classnine:index==8,classten:index==9}" v-for="(opencode,index) in PKinfo.open_code" :key="index">{{opencode}}</span>
          </div>
        </div>

        <div class="countdown-box flex">
            <img src="../../assets/img/layout-top-tabs/voice-icon.png" alt="" class="voice-icon" v-show="isVoiceOpen">
            <span class="next-periods">{{PKinfo.short_expect}}期</span>
            <count-down :openTime="PKinfo.next_open_time"></count-down>
        </div>
    </div>
</template>

<script>
import CountDown from "./CountDown";

export default {
  data() {
    return {
      isVoiceOpen: true,
      bgColorTitle: [
        {
          title: "冠",
          bgColor:'#1A97FF'
        },
        {
          title: "亚",
          bgColor:'#25A132'
        },
        {
          title: "三",
          bgColor:'#E52A20'
        },
        {
          title: "四",
          bgColor:'#ED7B2F'
        },
        {
          title: "五",
          bgColor:'#333333'
        },
        {
          title: "六",
          bgColor:'#0272D0'
        },
        {
          title: "七",
          bgColor:'#00C1C3'
        },
        {
          title: "八",
          bgColor:'#999999'
        },
        {
          title: "九",
          bgColor:'#E2281E'
        },
        {
          title: "十",
          bgColor:'#FFCC1D'
        },
      ],
      // luckNumLists:[
      //     '02','01','22','55','35','69','07','56','89','26'
      // ]
    };
  },

  components: {
    CountDown
  },
  props:{
    PKinfo: {}
  },
};
</script>
<style lang='less' scoped>
@import url(../../assets/css/lotteryTemplateLeft/lotteryTemplate.less);
.spanstyle{
  display: inline-block;
  width: 0.165rem;
  height: 0.18rem;
  line-height: 0.18rem;
}
.classone{
  background-color: #1A97FF
}
.classtwo{
  background-color: #25A132
}
.classthree{
  background-color: #E52A20
}
.classfore{
  background-color: #ED7B2F
}
.classfive{
  background-color: #333333
}
.classsix{
  background-color: #0272D0
}
.classseven{
  background-color: #00C1C3
}
.classeight{
  background-color: #999999
}
.classnine{
  background-color: #E2281E
}
.classten{
  background-color: #FFCC1D
}
.beijingPK-item-num{
  color: #fff;
}
</style>
